<template>
  <a-drawer v-model:open="open"
            width="100%"
            :footer="null"
            title="新增跟踪记录"
            :keyboard="false"
            :mask-closable="false"
            @close="handleClose"
            @cancel="handleClose">
    <a-form
        :model="formState"
        name="basic"
        layout="vertical"
        style="width: 100%;"
        ref="formRef"
        :rules="rules"
        :label-col=" { style: { width: '100%' } }"
        :wrapper-col="{ span: 24}"
        autocomplete="off"
    >
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="8">
          <div><h3 class="fz14">新增记录：</h3></div>
        </a-col>
      </a-row>
      <a-row :gutter="16">
        <a-col class="gutter-row" :span="8">
          <a-form-item  required>
            <template #label>
              <span class="fw">跟踪记录日期</span>
            </template>
            <a-date-picker class="w100" v-model:value="formState.genZongRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  placeholder="请选择"/>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="8">
          <a-form-item required>
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">下次处理日期</span>
                <span class="green ml20 pointer" @click="handleAddDay(7,'d')">+7天</span>
                <span class="green ml20 pointer" @click="handleAddDay(1,'m')">+1月</span>
                <span class="green ml20 pointer" @click="handleAddDay(3,'m')">+3月</span>
              </div>
            </template>
            <a-date-picker class="w100" v-model:value="formState.chuLiRiQi" format="YYYY-MM-DD" value-format="YYYY-MM-DD"  placeholder="请选择"/>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="8">
          <a-form-item   name="zhuangTai" label="船员状态">
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">船员状态</span>
              </div>
            </template>
            <a-radio-group v-model:value="formState.zhuangTai">
              <a-radio :value="1">待派</a-radio>
              <a-radio :value="2">在船</a-radio>
              <a-radio :value="3">在家</a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>

        <a-col class="gutter-row" :span="24">
          <a-form-item name="neiRong" label="记录内容">
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">记录内容</span>
              </div>
            </template>
            <a-textarea placeholder="请填写" rows="4"  v-model:value="formState.neiRong"></a-textarea>
            <div class="mt10"><span class="fw">快捷短语：</span><a-checkable-tag
                v-for="(tag) in tagsData"
                :key="tag"
                @change="handleChange(tag)"
            >
              {{ tag }}
            </a-checkable-tag></div>
          </a-form-item>
        </a-col>
        <a-col class="gutter-row" :span="24">
          <div class="flex">
            <a-button type="primary" class="mr10" :loading="addLoading" @click="handleSubmit">保存动态记录</a-button>
            <a-button type="primary" danger @click="handleClose">取消</a-button>
          </div>
        </a-col>
        <a-divider></a-divider>
        <a-col class="gutter-row" :span="24">
          <a-form-item

          >
            <template #label>
              <div class="flex flex-wrap" >
                <span class="fw">跟踪历史</span>
              </div>
            </template>

            <a-table :columns="columns"
                     rowClassName="items"
                     :loading="false"
                     :pagination="false"
                     :data-source="tableData"
                     size="small" sticky bordered>
              <template #bodyCell="{ column, text, record }">
                <template v-if="column.dataIndex==='zhuangTai'">
                  <div class="flex justify-center">
                    <span v-if="record.zhuangTai==1">待派</span>
                    <span v-if="record.zhuangTai==2">在船</span>
                    <span v-if="record.zhuangTai==3">在家</span>
                  </div>
                </template>
              </template>
            </a-table>
            <!--分页区域-->
            <div class="flex  mt20">
              <a-pagination
                  v-model:current="queryParams.pageNo"
                  v-model:page-size="queryParams.pageSize"
                  @change="handleChangePageNo"
                  :page-size-options="pageSizeOptions"
                  :show-total="total => `共 ${total} 项`"
                  show-size-changer
                  :total="total"/>
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer>
</template>
<script setup>
const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  chuanyuanId:'',
  keyword:''
})
const tableData = ref([]);
const total = ref(0)
const pages = ref(0)
const open = ref(false);
const addLoading = ref(false);
const tableLoading  = ref(false);
const formRef = ref({})
const roleArr = ref([])
const emits = defineEmits(["success"])
const chuanYuanItem = ref({})
const tagsData = reactive(['月份回船', '待派', '考证中','家中有事', '暂不上船', '见习完成','考核不合格', '不续聘', '已上船']);
const currentDate = new Date();
const formattedTime = currentDate.toISOString().split('T')[0]
const cid = ref("")
const cname = ref("")
const formState = ref({
  chuanYuanId:"",
  chuanYuanName:"",
  genZongRiQi:formattedTime,
  chuLiRiQi:"",
  neiRong:"",
  zhuangTai:1,
})

const columns = [
  {title: '#', width: 80, dataIndex: 'index',align:"center",customRender:({text,record,index})=>index+1},
  {title: '记录者', dataIndex: 'chuanYuanName',align:"center"},
  {title: '内容',dataIndex: 'neiRong',align:"center", ellipsis: true},
  {title: '跟踪记录日期', width: 180,  dataIndex: 'genZongRiQi',align:"center", ellipsis: true},
  {title: '下次处理日期', width: 180,dataIndex: 'chuLiRiQi',align:"center", ellipsis: true},
  {title: '状态', width: 160, dataIndex: 'zhuangTai',align:"center", ellipsis: true},
]

/**
 * 查询列表数据
 */
const handleLoadData = async ()=>{
  tableLoading.value = true
  queryParams.chuanyuanId = cid.value
  const resp = await useLoadChuanYuanKuDongTaiNewApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 验证规则
const rules = {
}

const handleChange = (tag, checked) => {
  formState.value.neiRong = tag
}

const handleAddDay = (day,flag) => {
  var d = new Date()
  if(flag == 'd') {
    d.setDate(d.getDate() + day)
  }else{
    d.setMonth(d.getMonth() + day)
  }
  formState.value.chuLiRiQi = d.Format("yyyy-MM-dd")
}

const handleSubmit = async () => {
  try {
    addLoading.value = true
    if(!formState.value.genZongRiQi){
      useMessage().error("请输入跟踪记录日期！")
      addLoading.value = false
      return;
    }
    if(!formState.value.chuLiRiQi){
      useMessage().error("请输入下次处理日期！")
      addLoading.value = false
      return;
    }
    /*if(!formState.value.neiRong){
      useMessage().error("请输入记录内容！")
      addLoading.value = false
      return;
    }*/
    formState.value.chuanYuanId = cid.value
    formState.value.chuanYuanName = cname.value
    await useSaveUpdateChuanYuanKuDongTaiApi(formState.value)
    addLoading.value = false
    useMessage().success("操作成功")
    handleLoadData()
    handleClose()
  } catch (e) {
    addLoading.value = false
    useMessage().error(e.msg)
  }
}

const handleOpen = async (record) => {
  open.value = true
  chuanYuanItem.value = record
  cid.value = record.id
  cname.value = record.xingMing
  formState.value.chuanYuanId = cid.value
  formState.value.chuanYuanName = cname.value
  handleLoadData()
}


const handleClose = () => {
  formState.value = {
    id:"",
    chuanyuanId:cid.value,
    chuanYuanName:cname.value,
    genZongRiQi:formattedTime,
    chuLiRiQi:null,
    neiRong:"",
    zhuangTai:1,
  }
  open.value = false
}

defineExpose({
  handleOpen
})
</script>

<style lang="scss" scoped>
.full-modal {
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
  }

  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: calc(100vh);
    overflow: auto;
    border-radius: 0px;
  }

  :where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-header {
    background: transparent;
  }

  .ant-modal-body {
    flex: 1;
  }
}
</style>
